<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="layui/echarts.min.js"></script>
    <script src="layui/jquery.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">

    $(function() {
        $.ajax({
            "url":"/barVO",
            "type":"POST",
            "success":function(data){
                console.log(data);
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '一周内打卡情况'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['学生已打卡', '学生未打卡', '老师已打卡', '老师未打卡']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.date
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '学生已打卡',
                            type: 'line',
                            /*stack: '总量',*/
                            data: data.studentClock
                        },
                        {
                            name: '学生未打卡',
                            type: 'line',
                            /*stack: '总量',*/
                            data: data.studentNotClock
                        },
                        {
                            name: '老师已打卡',
                            type: 'line',
                            /*stack: '总量',*/
                            data: data.teacherClock
                        },
                        {
                            name: '老师未打卡',
                            type: 'line',
                            /*stack: '总量',*/
                            data: data.teacherNotClock
                        },
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            }
        })
    })




</script>
</body>
</html>